<ul nz-menu nzMode="inline" style="width: 180px; background-color: rgb(24, 44, 77); color: white;">
    <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menus }"></ng-container>
    <ng-template #menuTpl let-menus>
        <ng-container *ngFor="let menu of menus; let if = index">
            <input nz-checkbox [(ngModel)]="menu.checked" (click)="checked(menu)" *ngIf="withCheckbox"/>
            <li *ngIf="!menu.children || menu.children.length === 0" nz-menu-item class="menu-item"
                [ngStyle]="{'margin-left': (menu.level)+'rem'}" [nzDisabled]="menu.disabled"
                [nzSelected]="menu.selected" (click)="clickItem(menu)" (keydown)="clickItem(menu)" tabindex="i">
                <span nz-icon [nzType]="menu.icon" *ngIf="menu.icon"></span>
                <span>{{menu.menuName}}</span>
            </li>
            <li *ngIf="menu.children && menu.children.length > 0" nz-submenu 
                [ngStyle]="{'margin-left': (menu.level)+'rem'}" [nzOpen]="menu.open"
                [nzTitle]="menu.menuName" [nzIcon]="menu.icon" [nzDisabled]="menu.disabled"
                >
                <ul>
                    <ng-container *ngTemplateOutlet="menuTpl; context: { $implicit: menu.children }"></ng-container>
                </ul>
            </li>
        </ng-container>
    </ng-template>
</ul>